import React, { useEffect, useState } from "react";
import { BrowserRouter as Router , Route , Link , Switch } from "react-router-dom";

const ShowDetail = (props) => {
    const [detail,setDetail] = useState([]);
    console.log(props)

    useEffect(() => {
        fetch(`https://cnodejs.org/api/v1/topic/${props.match.params.id}`)
        .then(res => res.json())
        .then(res => {
            console.log(res.data)
            setDetail(res.data);
        })
    },[]);

    return <div>
        <h1 style={{color:"#f0f",textAlign:"center"}}>{detail.title}</h1>
        <div style={{width:"200px",margin:"0 auto"}}>
            <img src={detail.author?.avatar_url} alt="头像" style={{width:"100px",height:"100px"}}/>
            <p>作者：{detail.author?.loginname}</p>
        </div>
        <div dangerouslySetInnerHTML={{__html:detail.content}} style={{width:"80%",padding:"20px 20px",margin:"0 auto",lineHeight:"16px",wordWrap:"break-word",backgroundColor:"#eee"}}></div>
    </div>
};

export default ShowDetail;